/**
  * 设备分布排行
  */
import React, { Component, PropTypes } from 'react';
import { Row, Col } from 'antd';
import NoData from './noData';

const styles = {
	container: {
		textAlign: 'center',
		color: '#646d73',
		lineHeight: '22px',
	},
	block: {
		backgroundColor: '#fff',
		width: '100%',
		height: '22px',
		overflow: 'hidden',
		borderRadius: '30px',
		cursor: 'pointer',
	},
	label: {
		textAlign: 'left',
		whiteSpace: 'nowrap',
		overflow: 'hidden',
		textOverflow: 'ellipsis',
		padding: '0px 10px 0px 0px',
	},
	activeBlock: {
		width: '20%',
		height: '100%',
		backgroundColor: '#ffec94',
		color: 'rgb(162, 162, 162)',
		textAlign: 'left',
		padding: '0px 0px 0px 10px',
	},
	value: {},
	icon: {
		fontSize: '18px',
		cursor: 'pointer',
	},
	item: {
		marginBottom: '15px',
	}
};

class RankingChart extends Component {

	getData() {
		const { data } = this.props;
		return data.filter(d => d.name);
		// if (!data || !data.length) return data;
		// const total = data.reduce((p, d) => {
		// 	return p + d.proportion;
		// }, 0);
		// if (data.length > 10) {
		// 	const tem = data.slice(9);
		// 	return data.slice(0, 9).concat(tem.reduce((p, d) => {
		// 		p.proportion += d.proportion;
		// 		p.count += d.count;
		// 		return p;
		// 	}, {
		// 		name: '其他'
		// 	}));
		// } else if (total < 1) {
		// 	return data.concat({
		// 		name: '其他',
		// 		proportion: 1 - total,
		// 		count: '未知'
		// 	});
		// }
	}

	renderItem(key, value, percentage, name) {
		return (
			<div style={styles.item}>
				<Row>
					<Col span={4} style={styles.label}>{name}</Col>
					<Col span={17}>
						<div style={styles.block}>
							<div style={Object.assign({}, styles.activeBlock, { width: `${percentage}%` })}>
								{value}
							</div>
						</div>
					</Col>
					<Col span={3}>{percentage}%</Col>
				</Row>
			</div>
		);
	}

	render() {
		const data = this.getData();
		const { style } = this.props;
		return (
			<div style={{ ...styles.container, ...style }} className="rankingChart">
				{
					data && data.length ?
						data.map((item, index) => this.renderItem(index, item.count, (item.proportion * 100).toFixed(2), item.name))
						: <NoData />
				}
			</div>
		);
	}
}

RankingChart.propTypes = {
	language: PropTypes.string
};
export default RankingChart;
